<template>
  <div class="block">
    <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
    <div class="conter">
    <el-carousel height="500px" width="1200px">
      <el-carousel-item v-for="item in 3" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    </div>
    <!-- <a onclick="pageScroll()">
        <div id="back"><img src="../assets/back.png" title="回到顶部"></div>
    </a> -->
<div id="five">
  <ul>
    <li><img src="../assets/51.jpg"></li>
    <li><img src="../assets/52.jpg"></li>
    <li><img src="../assets/53.jpg"></li>
    <li><img src="../assets/54.jpg"></li>
    <li><img src="../assets/55.png"></li>
  </ul>
</div>
<div id="newsw">
<p>新品/<span>尝鲜</span></p>

<img src="../assets/xinpin.jpg">
</div>
<div id="aimg">
  <ul>
    <li><img src="../assets/a1.png"></li>
    <li><img src="../assets/a2.png"></li>
    <li><img src="../assets/a3.png"></li>
    <li><img src="../assets/a4.png"></li>
  </ul>
</div>
<!-- <div id="ap">
  <ul>
    <li><p>米道</p></li>
    <li><p>中秋坚果慕斯</p></li>
    <li><p>3天慕斯月饼</p></li>
    <li><p>浅草</p></li>
  </ul>
</div> -->
  </div>
</template>
<style scoped>
#con1{
    width: 80%;
    margin: 50px auto;
}
.block{
  margin-top: 0;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-image: url(../assets/my1.jpg);
     background-size: 100% 500px;
  } 
  .el-carousel__item:nth-child(2n+1) {
     background-image: url(../assets/my2.jpg);
     background-size: 100% 500px;
  }
  .el-carousel__item:nth-child(3n) {
     background-image: url(../assets/my3.jpg);
     background-size: 100% 500px;
  }
  #five{
    width: 100%;
    height: 100px;
    /* background-color: #ff0; */
  }
  #five ul{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
  }
  #five ul li{
    width: 20%;
    float: left;
  }
  #five ul li img {
    width: 150px;
    height: 80px;
    margin-top: 10px;
    margin-left: 30px;
  }
  #aimg{
    width: 100%;
    height: 200px;
    /* background-color: #ff0; */
  }
  #aimg ul{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
  }
   #aimg ul li{
    width: 20%;
    float: left;
  }
  #aimg ul li img {
    /* margin-top: 10px; */
    margin-left: 100px;
  }
   #ap {
 width: 100%;
 height: 50px;
 margin-top: 20px;
 /* background-color: #ff0; */
  }
  #ap ul{
    width: 1000px;
    height: 50px;
    margin: 0 auto;
    /* background-color: #f00; */
  }
  /* #ap ul li{
    width: 300px;
    height: 50px;
    float: left;
    background-color: #00f;
    margin-left: -150px;
  } */
  /* #ap ul li p{
    font-size: 30px;
  } */
 .body {
            width: 80%;
            height: 350px;
            margin: 0 auto;
        }
        .body h2 {
            text-align: center
        }
        .bodycenter {
            width: 100%;
            height: 400px;
            margin: 0 auto;

        }
        .bodycenter ul {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }
        .bodycenter ul li {
            width: 23%;
            height: 300px;
            float: left;
            margin-left: 10px;
        }
        .bodycenter ul li img {
            width: 100%;
            height: 230px;
            border-radius: 20px;
        }
.conter{
  width: 1200px;
  height: 500px;
  margin: 20px auto;
}
 #p000 {
            width: 100%;
            height: 250px;
            margin-top: 400px;
            /* background-color: #f0f; */
        }
        #p111 {
            font-size: 30px;
            color: red;
            text-align: center;
            position: relative;
            top: 100px;
        }
        #p222 {
            font-size: 30px;
            color: black;
            text-align: center;
            position: relative;
            top: 50px;
        }
        .div1 {
            width: 100%;
            height: 300px;
            background: pink;
            padding: 0;
        }
        #div1 {
            width: 100%;
            height: 300px;
            background: #ccc
        }
        #div2 {
            width: 100%;
            height: 200px;
            background: #777
        }
        .div1 > p {
            position: relative;
            top: 40%;
            text-align: center
        }
        #div2 > p {
            position: relative;
            top: 48%;
            text-align: center
        }
#newsw{
  width: 1200px;
  height: 340px;
  margin: 0 auto;
}
#newsw p{
  font-size: 30px;
  color: #57450d;
}
#newsw img {
  width: 1200px;
  height: 250px;
}
#newsw span{
  font-size: 15px;
  color: #57450d;
}
</style>
<script>
export default {
   data() {
    return {
    tea:[],
    };
  },
    created() {
    this.$axios.get("http://localhost:3000/menu/menu")
      .then(res => {
        console.log("查询结果" + res.data.data);
        this.trades = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    getCard(card) {
      let path = "http://localhost:3000/upload/" + card;
      console.log(path);
      return path;
    },

  }
}
</script>